<template>
  <div class="chuqing">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="部门" prop="departmentId">
        <el-select v-model="ruleForm.departmentId" placeholder="部门" @change="changDept">
          <el-option v-for="item in dlist.lists" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="出勤时间" required>
        <el-col :span="11">
          <el-form-item prop="morningStartTime">
            <el-time-picker
              v-model="ruleForm.morningStartTime"
              value-format="HH:mm:ss"
              placeholder="任意时间点"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="11">
          <el-form-item prop="morningEndTime">
            <el-time-picker
              v-model="ruleForm.morningEndTime"
              value-format="HH:mm:ss"
              placeholder="任意时间点"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item required>
        <el-col :span="11">
          <el-form-item prop="afternoonStartTime">
            <el-time-picker
              v-model="ruleForm.afternoonStartTime"
              value-format="HH:mm:ss"
              placeholder="任意时间点"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="11">
          <el-form-item prop="afternoonEndTime">
            <el-time-picker
              v-model="ruleForm.afternoonEndTime"
              value-format="HH:mm:ss"
              placeholder="任意时间点"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存更新</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAtteItem, saveCfgAtte } from '@/api/attendance'
import { Message } from 'element-ui'
export default {

  inject: ['dlist'],
  data() {
    return {
      ruleForm: {
        id: 0,
        companyId: 0,
        departmentId: 0,
        morningStartTime: '',
        morningEndTime: '',
        afternoonStartTime: '',
        afternoonEndTime: ''
      },
      rules: {
        departmentId: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        morningStartTime: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        morningEndTime: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        afternoonStartTime: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        afternoonEndTime: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      }
    }
  },
  async created() {
    this.ruleForm.departmentId = this.dlist.lists[0].id
    this.load()
  },
  methods: {
    async load(id) {
      if (id) {
        this.ruleForm.departmentId = id
      }
      const req = await getAtteItem({ departmentId: this.ruleForm.departmentId })
      this.ruleForm.morningStartTime = this.convertTime(String(req.morningStartTime))// new Date(year, month, day, mst[0], mst[1], mst[2])//
      this.ruleForm.morningEndTime = this.convertTime(String(req.morningEndTime))//
      this.ruleForm.afternoonStartTime = this.convertTime(String(req.afternoonStartTime))//
      this.ruleForm.afternoonEndTime = this.convertTime(String(req.afternoonEndTime))//
      this.ruleForm.id = req.id
      this.ruleForm.companyId = req.companyId
      //   this.ruleForm.departmentId = req.departmentId

    //   console.log('this.ruleForm', this.ruleForm)
    },
    submitForm() {
      this.$refs.ruleForm.validate(async(valid) => {
        await saveCfgAtte(this.ruleForm)
        Message.success('保存成功')
        this.closeDialog()
      })
    },
    changDept(id) {
      this.ruleForm.departmentId = id
      //   console.log(id)
      this.load()
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    convertTime(time) {
      if (time === '') return ''
      const times = String(time).split(':')
      // console.log('times', times, times.length)
      if (times.length === 1) {
        return times[0].padStart(2, '0') + ':00:00'
      } else if (times.length === 2) {
        // console.log('times2', times[0].padStart(2, '0') + ':' + times[1].padStart(2, '0') + ':00')
        return times[0].padStart(2, '0') + ':' + times[1].padStart(2, '0') + ':00'
      } else {
        return time
      }
    }
  }

}
</script>

<style>
    .line{
        text-align: center;
    }
</style>
